<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../../../style.css">
    <link rel="stylesheet" href="../../../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
    </style>
</head>
<body style="background: #01253f">
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <p style="font-weight: 900;color: #00c5cc;"><strong>| 近期巡查详情</strong></p>
                <div style="overflow-y: auto; height: 500px; width:100%;">
                    <table width="100%" border="1" cellspacing="0" cellpadding="10"
                           style="font-size: 14px;color:white;font-weight: 900"
                           bordercolor="#0081ff;overflow: auto;hight:100px">
                        <tr align="center" style="background: darkblue">
                            <th>风险点名称</th>
                            <th>巡查人</th>
                            <th>巡查结果</th>
                            <th>图片</th>
                            <th>巡查周期</th>
                            <th>巡查时间</th>
                            <th>巡查说明</th>
                        </tr>
                        <tr align="center" v-for="(item,index) in tableData" :key="index">
                            <td>{{item.patrolName}}</td>
                            <td>{{item.userName}}</td>
                            <td>{{item.alarmSituation==0?'无隐患':'有隐患'}}</td>
                            <td>
                                <template v-if="item.img">
                                    <el-popover
                                            placement="right"
                                            width="300"
                                            trigger="hover"
                                            popper-class="popClass">
                                        <img :src="item.img"
                                             style="max-width:600px;max-height: 380px "/>
                                        <img :src="item.img" slot="reference"
                                             style="max-width:30px;max-height: 30px "/>
                                    </el-popover>

                                    <!--<img :src="item.img" alt="" style="width:20px;height: 20px">-->

                                </template>
                                <template v-if="item.img1">
                                    <el-popover
                                            placement="right"
                                            width="300"
                                            trigger="hover"
                                            popper-class="popClass">
                                        <img :src="item.img1"
                                             style="max-width:600px;max-height: 380px "/>
                                        <img :src="item.img1" slot="reference"
                                             style="max-width:30px;max-height: 30px "/>
                                    </el-popover>
                                    <!--<img :src="item.img1" alt="" style="width:20px;height: 20px">-->
                                </template>
                                <template v-if="item.img2">
                                    <el-popover
                                            placement="right"
                                            width="300"
                                            trigger="hover"
                                            popper-class="popClass">
                                        <img :src="item.img2"
                                             style="max-width:600px;max-height: 380px "/>
                                        <img :src="item.img2" slot="reference"
                                             style="max-width:30px;max-height: 30px "/>
                                    </el-popover>
                                    <!--<img :src="item.img2" alt="" style="width:20px;height: 20px">-->
                                </template>
                                <template v-if="item.img3">
                                    <el-popover
                                            placement="right"
                                            width="300"
                                            trigger="hover"
                                            popper-class="popClass">
                                        <img :src="item.img3"
                                             style="max-width:600px;max-height: 380px "/>
                                        <img :src="item.img3" slot="reference"
                                             style="max-width:30px;max-height: 30px "/>
                                    </el-popover>
                                    <!--<img :src="item.img3" alt="" style="width:20px;height: 20px">-->
                                </template>
                            </td>
                            <td>{{item.cycle}}</td>
                            <td>{{item.missionTime}}</td>
                            <td>{{item.missionDetail}}</td>
                        </tr>
                    </table>

                </div>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
                <!--<div id="myChart" style="height: 600px;width: 100%"></div>-->
            </el-col>
            <!--<el-col :span="12">-->
            <!--</el-col>-->
        </el-row>
        <el-row>
        </el-row>
    </div>
</div>
<script type='text/javascript' src='../../../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            typeJson: {
                0: '分',
                1: '时',
                2: '天',
                3: '周',
                4: '月',
                5: '年',
            },
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
        },
        created: function () {
            $('.page').show();
            this.loadData();

        },
        methods: {
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            cancelDetail() {
                this.detailFormVisible = false;
                this.DetailData = {};
            },
            loadData: function () {
                let param = {};
                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                param.processflag = 2;

                HttpUtil.get('Patrolexcute/getRiskStatus', param).success((res) => {
                    this.tableData = res.data;
                    vuePage.totalCount = res.total;
                    for (var i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].img = SiteConfig.webApiset + this.tableData[i].img;
                        this.tableData[i].img1 = this.tableData[i].img1 ? SiteConfig.webApiset + this.tableData[i].img1 : "";
                        this.tableData[i].img2 = this.tableData[i].img2 ? SiteConfig.webApiset + this.tableData[i].img2 : "";
                        this.tableData[i].img3 = this.tableData[i].img3 ? SiteConfig.webApiset + this.tableData[i].img3 : "";
                        this.tableData[i].cycle = this.tableData[i].cycle + this.typeJson[this.tableData[i].cycleType];
                    }
                    // this.drawChart();
                });
            },
            drawChart() {
                let chartData = {
                    ydatas: [],
                    ones: [],
                    twos: [],
                    threes: [],
                    fours: [],
                }
                for (let item of this.tableData) {
                    chartData.ydatas.push(item.zone);
                    chartData.ones.push(item.one);
                    chartData.twos.push(item.two);
                    chartData.threes.push(item.three);
                    chartData.fours.push(item.four);
                }
                let option = {
                    color: ["#f6d54a", "#f69846", "#45dbf7", "#f845f1", "#ad46f3", "#5045f6", "#4777f5"],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['重大风险点', '较大风险点', '一般风险点', '低风险点'],
                        textStyle: {
                            color: '#FFFFFF',
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFFFFF' //
                            }
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: chartData.ydatas,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#FFFFFF' //
                            }
                        },
                    },
                    series: [
                        {
                            name: '重大风险点',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            data: chartData.ones
                        },
                        {
                            name: '较大风险点',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            data: chartData.twos
                        },
                        {
                            name: '一般风险点',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            data: chartData.threes
                        },
                        {
                            name: '低风险点',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                            data: chartData.fours
                        },
                    ]
                };
                let myChart = echarts.init(document.getElementById('myChart'));
                myChart.setOption(option);

                window.onresize = function () {
                    myChart.resize();//

                }
            }


        },

        mounted: function () {

        }
    });
</script>
</body>
</html>
